<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;padding: 0;
	}
	/*父盒子1*/
	.flexbox ,.flexbox2{
		width: 1000px;
		height: 100px;
		border: 1px solid red;
		margin: 100px auto;
		display: flex;
		/*主轴操作*/
		/*flex-direction: column;默认主轴是横向的,现在改成纵轴*/
		/*flex-wrap: nowrap;默认强制主轴到排成一排，wrap多了自动换行 */
		/*flex-direction: column;*/
		/*flex-wrap: wrap;*/
		/*主轴排版方式*/
		/*justify-content: space-between;主轴对齐方式，两边顶边，间隙在中间*/
		/*justify-content: space-around;主轴对齐方式，每一个都有间隙*/
		/*justify-content: flex-start;主轴对齐方式，每一个都有间隙*/
		/*justify-content: flex-end;主轴对齐方式，每一个都有间隙*/
		/*justify-content: center;主轴对齐方式，所有元素居中对齐*/
		/*justify-content: space-between;*/
		/*justify-content: space-around;*/
		/*justify-content: flex-start;*/
		/*justify-content: center;*/
		justify-content: space-around;
		/*副轴排版方式*/
		/*align-items: flex-start;所有子项副轴（默认纵轴）左边对齐*/
		/*align-items: flex-end;所有子项副轴（默认纵轴）右边对齐*/
		/*align-items: center;所有子项副轴（默认纵轴）居中对齐*/
		/*align-items: baseline;所有子项副轴（默认纵轴）基线对齐*/
		/*align-items: stretch;所有子项副轴（默认纵轴）没高度的子盒子高度撑满*/
	}
	/*子盒子1*/
	.flexbox .itembox{
		width: 100px;
		/*height: 100px;*/
		background: gray;
		border-radius: 30%;
		/*下面的代码是让当前元素内部也上下左右居中*/
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*子盒子中单独要排版的*/
	.flexbox .item1{
		align-self: flex-start;
	}
	.flexbox .item2{
		align-self: flex-end;
	}
	.flexbox .item3{
		align-self: center;
	}
	.flexbox .item4{
		align-self: baseline;
	}
	.flexbox .item5{
		align-self: stretch;
	}
	/*子盒子2*/
	.flexbox2 .itembox{
		border:1px solid green;
		background: pink;
	}
	.flexbox2 .item1{
		flex:1;
	}
	.flexbox2 .item2{
		flex:2;
	}
	.flexbox2 .item3{
		flex:3;
	}
	.flexbox2 .item4{
		flex:4;
	}
	.flexbox2 .item5{
		flex:5;
	}
</style>
<body>
	<!-- 盒子1 -->
	<div class="flexbox">
		<div class="itembox">默认</div>
		<div class="itembox item1">flex-start</div>
		<div class="itembox item2">flex-end</div>
		<div class="itembox item3">center</div>
		<div class="itembox item4">baseline</div>
		<div class="itembox item5">stretch</div>
		<div class="itembox">默认</div>
	</div>
	<!-- 盒子2 -->
	<div class="flexbox2">
		<div class="itembox">默认</div>
		<div class="itembox item1">1份</div>
		<div class="itembox item2">2份</div>
		<div class="itembox item3">3份</div>
		<div class="itembox item4">4份</div>
		<div class="itembox item5">5份</div>
		<div class="itembox">默认</div>
	</div>
</body>
</html>